m路由器窝
欢迎来到路由器窝！
当前位置： 192.168.1.1 > CMS教程 > DEDEcms > 图集增加多图集多实例可会员多图集（转载）
图集增加多图集多实例可会员多图集（转载）

图集增加多图集多实例可会员多图集（转载）

浏览次数： 次

作者： 路由器窝

信息来源：

更新日期： 2020-01-12 11:32

文章简介

演示效果 整合功能 支持 gbk / utf8编码织梦程序 支持后台、前台、会员接入 支持所有模型接入 支持每个图片删除一并删除图片文件 支持每个图片注释 支持每个图片排序 支持前台超级简单标签调用每个图集 整合教程 第一步、下载额外所需文件，根据自己网

  • 正文开始
  • 相关文章
  • 发表评论

    • 演示效果

     

    整合功能

    • 支持 gbk / utf8编码织梦程序
    • 支持后台、前台、会员接入
    • 支持所有模型接入
    • 支持每个图片删除一并删除图片文件
    • 支持每个图片注释
    • 支持每个图片排序
    • 支持前台超级简单标签调用每个图集

    整合教程

    第一步、下载额外所需文件，根据自己网站编码

    把include里面的"layui"文件夹和"taglib"文件夹放到你网站include文件夹里去

    本地下载：织梦图集layui上传模块.zip

    第二步、为后台图片集模型添加layui上传模块，官方原来的图集上传功能保留不动

    伸手党 可以直接下载这4个文件替换即可使用(替换之前建议你备份你自己的这4个文件)

    • /dede/templets/album_add.htm
    • /dede/templets/album_edit.htm
    • /dede/album_add.php
    • /dede/album_edit.php

    本地下载：织梦后台图片集模型添加layui上传模块4个文件

    伸手党 覆盖文件后刷新后台即可使用，下面的教程可略过

    动手党 请看下面教程

    1、打开 /dede/templets/album_add.htm 找到

    <div id="thumbnails"></div>

    在它所在的tr标签下面加入

    <link href="../include/layui/css/layui.css" rel="stylesheet" media="all">
<script src="../include/layui/layui.js" type="text/javascript"></script>
<tr>
	<td width="100%" height="24" colspan="4" class="bline">
		<table width="800" border="0" cellspacing="0" cellpadding="0">
			<tr>
				<td width="80" height="40">&nbsp;<b>默认图集：</b></td>
				<td><button type="button" class="layui-btn layui-btn-sm layui-btn-normal imgurls"><i class="layui-icon layui-icon-upload"></i>上传图片</button></td>
			</tr>
		</table>
	</td>
</tr>
<tr>
	<td colspan="4" class="bline">
		<table width='100%'>
			<tr>
				<td><div class="layui-upload-img"><ul class="layui-upload-list" id="imgurls"></ul></div></td>
			</tr>
		</table>
	</td>
</tr>
<script type="text/javascript">
    layui.use('upload', function(){
        var $ = layui.jquery
            ,upload = layui.upload;

        // imgurls 图片上传
        var uploadInst = upload.render({
            elem: '.imgurls'
            ,url: '../include/layui/layuiupload.php'
			,multiple: true
			,accept: 'images'
            ,acceptMime: 'image/*'
            ,done: function(res){
				if(res.code == 0){
					return layer.msg(res.msg);
				}
				$('#imgurls').append('<li class="item_img"><div class="operate"><i class="toleft layui-icon layui-icon-left"></i><i class="toright layui-icon layui-icon-right"></i><i class="close layui-icon layui-icon-close-fill" data-id="' + res.id + '"></i></div><img src="' + res.img + '" class="img" ><input type="text" name="imgurls[alt][]" value="" class="layui-input" /><input type="hidden" name="imgurls[url][]" value="' + res.img + '" /><input type="hidden" name="imgurls[uaid][]" value="' + res.id + '" /></li>');
			}
            ,error: function(){

            }
        });

		$("body").on("click",".close",function(){
			var id = $(this).data('id');
			$.get('../include/layui/layuiupload.php',{'dopost':'del','id':id},function(res){})
			$(this).closest("li").remove();
		});

		$("body").on("click",".layui-upload-img ul li .toleft",function(){
			var li_index = $(this).closest("li").index();
			if(li_index >= 1){
				$(this).closest("li").insertBefore($(this).closest("ul").find("li").eq(Number(li_index)-1));
			}
		});
		$("body").on("click",".layui-upload-img ul li .toright",function(){
			var li_index = $(this).closest("li").index();
			$(this).closest("li").insertAfter($(this).closest("ul").find("li").eq(Number(li_index)+1));
		});

    });
</script>

    如图

    2、打开 /dede/templets/album_edit.htm 找到

    <div id="thumbnails"></div>

    在它所在的tr标签下面加入

    <link href="../include/layui/css/layui.css" rel="stylesheet" media="all">
<script src="../include/layui/layui.js" type="text/javascript"></script>
<tr>
	<td width="100%" height="24" colspan="4" class="bline">
		<table width="800" border="0" cellspacing="0" cellpadding="0">
			<tr>
				<td width="80" height="40">&nbsp;<b>默认图集：</b></td>
				<td><button type="button" class="layui-btn layui-btn-sm layui-btn-normal imgurls"><i class="layui-icon layui-icon-upload"></i>上传图片</button></td>
			</tr>
		</table>
	</td>
</tr>
<tr>
	<td colspan="4" class="bline">
		<table width='100%'>
			<tr>
				<td><div class="layui-upload-img"><ul class="layui-upload-list" id="imgurls"></ul></div></td>
			</tr>
		</table>
	</td>
</tr>
<script type="text/javascript">
    layui.use('upload', function(){
        var $ = layui.jquery
            ,upload = layui.upload;

        // imgurls 图片上传
        var uploadInst = upload.render({
            elem: '.imgurls'
            ,url: '../include/layui/layuiupload.php'
			,multiple: true
			,accept: 'images'
            ,acceptMime: 'image/*'
            ,done: function(res){
				if(res.code == 0){
					return layer.msg(res.msg);
				}
				$('#imgurls').append('<li class="item_img"><div class="operate"><i class="toleft layui-icon layui-icon-left"></i><i class="toright layui-icon layui-icon-right"></i><i class="close layui-icon layui-icon-close-fill" data-id="' + res.id + '"></i></div><img src="' + res.img + '" class="img" ><input type="text" name="imgurls[alt][]" value="" class="layui-input" /><input type="hidden" name="imgurls[url][]" value="' + res.img + '" /><input type="hidden" name="imgurls[uaid][]" value="' + res.id + '" /></li>');
			}
            ,error: function(){
                //失败重传
                
            }
        });

		$("body").on("click",".close",function(){
			var id = $(this).data('id');
			$.get('../include/layui/layuiupload.php',{'dopost':'del','id':id},function(res){})
			$(this).closest("li").remove();
		});

		$("body").on("click",".layui-upload-img ul li .toleft",function(){
			var li_index = $(this).closest("li").index();
			if(li_index >= 1){
				$(this).closest("li").insertBefore($(this).closest("ul").find("li").eq(Number(li_index)-1));
			}
		});
		$("body").on("click",".layui-upload-img ul li .toright",function(){
			var li_index = $(this).closest("li").index();
			$(this).closest("li").insertAfter($(this).closest("ul").find("li").eq(Number(li_index)+1));
		});

    });
</script>

    如图

    3、打开 /dede/album_add.php 找到

    //加入附加表

    在它上面加入

    //图集字段 imgurls
if(is_array($_POST['imgurls']['url']))
{
	$my_imgurls = "";
	foreach($_POST['imgurls']['url'] as $key => $val)
	{
		$my_imgurls .= "{dede:img ddimg='$val' text='{$_POST['imgurls']['alt'][$key]}' width='' height='' uaid='{$_POST['imgurls']['uaid'][$key]}'}$val{/dede:img}
";
	}
}
$imgurls .= addslashes($my_imgurls);

    4、打开 /dede/album_edit.php 找到

    //更新附加表

    在它上面加入

    //图集字段 imgurls
if(is_array($_POST['imgurls']['url']))
{
	$my_imgurls = "";
	foreach($_POST['imgurls']['url'] as $key => $val)
	{
		$my_imgurls .= "{dede:img ddimg='$val' text='{$_POST['imgurls']['alt'][$key]}' width='' height='' uaid='{$_POST['imgurls']['uaid'][$key]}'}$val{/dede:img}
";
	}
}
$imgurls .= addslashes($my_imgurls);

    第三步、内容页模板调用图集标签新写法

    <h2>默认图集</h2>
	<ul>
	{dede:imagelist}
	<li>
		<img src="[field:imgsrc/]" alt="[field:text/]" width="220" height="150">
		<p>[field:text/]</p>
	</li>
	{/dede:imagelist}
</ul>

<h2>户型图片</h2>
<ul>
	{dede:imagelist field="huxing"}
	<li>
		<img src="[field:imgsrc/]" alt="[field:text/]" width="220" height="150">
		<p>[field:text/]</p>
	</li>
	{/dede:imagelist}
</ul>

    特别说明

    {dede:imagelist field="huxing"}

    field='图片集字段'

    不填的话就是调用图集默认

    织梦多个图集多实例教程

    在操作下面的教程之前必须确定你已经完成上面第一、第二、第三步

    第一步、附加表里添加多个图集字段，例如 户型图片 字段

    后台-系统-SQL工具-SQL命令行工具

    ALTER TABLE dede_addonimages ADD `huxing` text;

    dede_addonimages 是我的图集模型附加表，注意自己的附加表，千万别写错了

    第二步、打开 /dede/templets/album_add.htm 找到

    id="imgurls"

    在它所在的tr下面加入

    <tr>
	<td width="100%" height="24" colspan="4" class="bline">
		<table width="800" border="0" cellspacing="0" cellpadding="0">
			<tr>
				<td width="80" height="40">&nbsp;<b>户型图片：</b></td>
				<td>
					<button type="button" class="layui-btn layui-btn-sm layui-btn-normal huxing">
						<i class="layui-icon layui-icon-upload"></i>上传图片
					</button>
				</td>
			</tr>
		</table>
	</td>
</tr>
<tr>
	<td colspan="4" class="bline">
		<table width='100%'>
			<tr>
				<td>
					<div class="layui-upload-img">
						<ul class="layui-upload-list" id="huxing"></ul>
					</div>
				</td>
			</tr>
		</table>
	</td>
</tr>

    如图，注意标注的地方

    继续找到

    // imgurls 图片上传

    在它上面加入

    // huxing 图片上传
var uploadInst = upload.render({
	elem: '.huxing'
	,url: '../include/layui/layuiupload.php'
	,multiple: true
	,accept: 'images'
	,acceptMime: 'image/*'
	,done: function(res){
		if(res.code == 0){
			return layer.msg(res.msg);
		}
		$('#huxing').append('<li class="item_img"><div class="operate"><i class="toleft layui-icon layui-icon-left"></i><i class="toright layui-icon layui-icon-right"></i><i class="close layui-icon layui-icon-close-fill" data-id="' + res.id + '"></i></div><img src="' + res.img + '" class="img" ><input type="text" name="huxing[alt][]" value="" class="layui-input" /><input type="hidden" name="huxing[url][]" value="' + res.img + '" /><input type="hidden" name="huxing[uaid][]" value="' + res.id + '" /></li>');
	}
	,error: function(){
		//失败重传
		
	}
});

    如图，注意标注的地方

    第三步、打开 /dede/templets/album_eidt.htm 找到

    id="imgurls"

    在它所在的tr下面加入

    <tr>
	<td width="100%" height="24" colspan="4" class="bline">
		<table width="800" border="0" cellspacing="0" cellpadding="0">
			<tr>
				<td width="80" height="40">&nbsp;<b>户型图片：</b></td>
				<td>
					<button type="button" class="layui-btn layui-btn-sm layui-btn-normal huxing">
						<i class="layui-icon layui-icon-upload"></i>上传图片
					</button>
				</td>
			</tr>
		</table>
	</td>
</tr>
<tr>
	<td colspan="4" class="bline">
		<table width='100%'>
			<tr>
				<td>
					<div class="layui-upload-img">
						<ul class="layui-upload-list" id="huxing">
							<?php
							if($addRow['huxing']!="")
							{
								$dtp = new DedeTagParse();
								$dtp->LoadSource($addRow['huxing']);
								if(is_array($dtp->CTags))
								{
									$fhtml = '';
									foreach($dtp->CTags as $ctag)
									{
										if($ctag->GetName()=="img")
										{
											$bigimg = trim($ctag->GetInnerText());
											$text = trim($ctag->GetAtt('text'),'‘');
											$uaid = trim($ctag->GetAtt('uaid'),'‘');
											$fhtml .= "<li class="item_img"><div class="operate"><i class="toleft layui-icon layui-icon-left"></i><i class="toright layui-icon layui-icon-right"></i><i class="close layui-icon layui-icon-close-fill" data-id="{$uaid}"></i></div><img src="{$bigimg}" class="img" ><input type="text" name="huxing[alt][]" value="{$text}" class="layui-input" /><input type="hidden" name="huxing[url][]" value="{$bigimg}" /><input type="hidden" name="huxing[uaid][]" value="{$uaid}" /></li>";
										}
									}
									echo $fhtml;
								}
								$dtp->Clear();
							}
							?>
						</ul>
					</div>
				</td>
			</tr>
		</table>
	</td>
</tr>

    如图，注意标注的字段部分

    继续找到

    // imgurls 图片上传

    在它上面加入

    // huxing 图片上传
var uploadInst = upload.render({
	elem: '.huxing'
	,url: '../include/layui/layuiupload.php'
	,multiple: true
	,accept: 'images'
	,acceptMime: 'image/*'
	,done: function(res){
		if(res.code == 0){
			return layer.msg(res.msg);
		}
		$('#huxing').append('<li class="item_img"><div class="operate"><i class="toleft layui-icon layui-icon-left"></i><i class="toright layui-icon layui-icon-right"></i><i class="close layui-icon layui-icon-close-fill" data-id="' + res.id + '"></i></div><img src="' + res.img + '" class="img" ><input type="text" name="huxing[alt][]" value="" class="layui-input" /><input type="hidden" name="huxing[url][]" value="' + res.img + '" /><input type="hidden" name="huxing[uaid][]" value="' + res.id + '" /></li>');
	}
	,error: function(){
		//失败重传
		
	}
});

    如图，注意标注的字段

    第四步、打开 /dede/album_add.php 找到

    //生成HTML

    在它上面加入

    //新增图集字段 huxing
if(is_array($_POST['huxing']['url']))
{
	$huxing = "";
	foreach($_POST['huxing']['url'] as $key => $val)
	{
		$huxing .= "{dede:img ddimg='$val' text='{$_POST['huxing']['alt'][$key]}' width='' height='' uaid='{$_POST['huxing']['uaid'][$key]}'}$val{/dede:img}
";
	}
	if($huxing)
	{
		$huxing = addslashes($huxing);
		$upquery = "UPDATE `$addtable` SET `huxing`='$huxing' WHERE aid='$arcID' ";
		$dsql->ExecuteNoneQuery($upquery);
	}
}

    如图，注意标注的字段

    第五步、打开 /dede/album_edit.php 找到

    //生成HTML

    在它上面加入

    //新增图集字段 huxing
$huxing = "";
if(is_array($_POST['huxing']['url']))
{
	foreach($_POST['huxing']['url'] as $key => $val)
	{
		$huxing .= "{dede:img ddimg='$val' text='{$_POST['huxing']['alt'][$key]}' width='' height='' uaid='{$_POST['huxing']['uaid'][$key]}'}$val{/dede:img}
";
	}
}
$huxing = addslashes($huxing);
$upquery = "UPDATE `$addtable` SET `huxing`='$huxing' WHERE aid='$id' ";
$dsql->ExecuteNoneQuery($upquery);

    如图，注意标注的字段

    第六步、内容页标签新写法参考上面

    转载请注明：DEDEcms» 图集增加多图集多实例可会员多图集（转载）

    标签：
    • dedecms织梦自定义表单导出到excel

      DEDEcmsdedecms织梦自定义表单导出到excel

      159阅读
      修改2个文件，让织梦自定义表单自由导出到Excel表格里。 修改教程如下： 1、 \dede\templets\diy_main.htm 找到 前台预览 / a 在它的下面加入一行 | a href = diy_list.php?action=exceldiyid={dede:field.diyid/} target ...
    • DEDE wap蓝色通用模板下载

      DEDEcmsDEDE wap蓝色通用模板下载

      259阅读
      下载地址
    • DEDE首页分页插件

      DEDEcmsDEDE首页分页插件

      151阅读
      DEDE首页分页插件 功能：可以实现在首页使用{dede:list}以及{dede:pagelist}标签，并且生成的时候可以将首页分页 index.html index_1.html index_2.html 进后台模块管理新增模块，导入xml文件。 除了xml文件，其他的上传到根目录，有覆盖的覆盖，不影响原功
    • 图集提取所有图片，到列表或者首页图集第一张图片调用

      DEDEcms图集提取所有图片，到列表或者首页图集第一张图片调用

      255阅读
      打开 \include\extend.func.php 在最下面加入这个方法 function Getimgurls($aid,$num=4) { global $dsql; $imgurls = $result = ; $imgrow = $dsql-GetOne( Select imgurls From `dede...
    • DEDECMS 自定义字段附件只要下载地址

      DEDEcmsDEDECMS 自定义字段附件只要下载地址

      187阅读
      table width=300 tr td height=30 width=20a href=/uploads/soft/110215/8-6262616262.rar target=_blankimg src=~cfg_phpurl~/img/addon.gif border=0 align=center/a/td ...
    • PHP 输出 有单引号的 字符串

      DEDEcmsPHP 输出 有单引号的 字符串

      111阅读
      方法1： 单引号前面加\ 如 insert into table value (null,\value); 方法2： 用双引号引起单引号 如 INSERT INTO table VALUE (NULL, njkl); 你在写入或者读取 或者从数据库中读出来以后，显示在网页上 都可以用这样的方法 加\ 或者 双引号引起单...
    • 自适应网站内容页面图片自适应

      DEDEcms自适应网站内容页面图片自适应

      183阅读
      .detailPage .text img{ width: 100%; height: auto;}
    • DEDE提取文章第一张图片作为缩略图（亲测）

      DEDEcmsDEDE提取文章第一张图片作为缩略图（亲测）

      266阅读
      首先打开织梦管理后台的 /dede/article_description_main.php文件，在 //获取自动摘要代码结束后面加入函数 //获取首图为缩略图 if($dojob==spic) {require_once(DEDEADMIN./inc/inc_archives_functions.php);if(em...
    • 修改DEDECMS栏目页标题中的斜杠替换为下划线

      DEDEcms修改DEDECMS栏目页标题中的斜杠替换为下划线

      99阅读
      修改DEDECMS栏目页标题中的斜杠替换为下划线 打开include/arc.listview.class.php，大约84行。 $this-Fields[title] = preg_replace([], / ,$this-TypeLink-GetPositionLink(false)); 替换为： $this-Fi...
    • dedecms中自定义模型自定义字段采集数据的方法

      DEDEcmsdedecms中自定义模型自定义字段采集数据的方法

      123阅读
      对于新建的dedecms自定义模型，如何采集数据呢？ 打开\dede\templets\co_add_step0.htm，找到（大约在17行） select name=channelid id=channelid style=width:250px ?php $dsql-SetQuery(Select id,typen...
    上一页：织梦获取图集图片数量
    下一页：自适应网站内容页面图片自适应
    最近更新作品
    城市联动提交表单
    城市联动提交表单
    更新时间：2020-11-17

    169人已经看过了！

    统计栏目文章数量有的显示数量没有显示0
    统计栏目文章数量有的显示数量没有显示0
    更新时间：2020-11-15

    135人已经看过了！

    自定义表单列表添加全选
    自定义表单列表添加全选
    更新时间：2020-10-19

    157人已经看过了！

    自定义表单展现样式
    自定义表单展现样式
    更新时间：2020-10-19

    165人已经看过了！

    Body里面多了个&amp;#65279字符,空白一行解决办法
    Body里面多了个&amp;#65279字符,空白一行解决办法
    更新时间：2021-01-25

    168人已经看过了！

    自定义证书添加图片
    自定义证书添加图片
    更新时间：2020-07-15

    235人已经看过了！

    dede导出证书查询数据到excel
    dede导出证书查询数据到excel
    更新时间：2020-06-19

    287人已经看过了！

    dedecms--会员信息导出excel表格
    dedecms--会员信息导出excel表格
    更新时间：2020-06-19

    171人已经看过了！

    dede 获取图集里面图片的数量
    dede 获取图集里面图片的数量
    更新时间：2020-05-25

    176人已经看过了！

    织梦栏目做成列表分页（小说列表）
    织梦栏目做成列表分页（小说列表）
    更新时间：2020-05-08

    215人已经看过了！